<template>
  <a-page-header :title="$t('232')">
    <template #extra>
      <a-button @click="refeshData">{{ $t("104") }}</a-button>
    </template>
  </a-page-header>
  <a-table
    :columns="cols"
    :data-source="lstActionLog"
    bordered
    :pagination="false"
    size="small"
  >
  </a-table>
  <a-flex justify="center" style="margin-top: 4px" v-if="state.hasMoreRecords">
    <a-button type="primary" @click="moreData">{{ $t("379") }}</a-button>
    &nbsp;&nbsp;
    <a-badge
      overflowCount="99999"
      :count="state.remainCount"
      :number-style="{ backgroundColor: '#52c41a' }"
      style="margin-top: 3px"
    />
  </a-flex>
</template>
<script setup>
import { reactive, onMounted } from "vue";
import CommonDefine from "@/component/CommonDefine";
import { useI18n } from "vue-i18n";

const { t } = useI18n();
const cols = [
  {
    title: t("230"),
    dataIndex: "logTs",
  },
  {
    title: t("231"),
    dataIndex: "log",
  },
];
const state = reactive({
  pageIndex: 0,
  hasMoreRecords: false,
  lastIndex: 0,
  remainCount: 0,
});

const lstActionLog = reactive([]);

const refeshData = () => {
  lstActionLog.splice(0, lstActionLog.length);
  state.pageIndex = 1;
  _do_fetch();
};

const moreData = () => {
  state.pageIndex += 1;
  _do_fetch();
};

const _do_fetch = () => {
  let pd = {
    pageIndex: state.pageIndex,
    pageSize: 10,
    lastIndex: state.lastIndex,
  };
  CommonDefine.apiPostArm("/api/v1/user/log", pd, (d) => {
    d.data.forEach((item) => {
      lstActionLog.push(item);
    });
    state.lastIndex = d.lastIndex;
    state.hasMoreRecords = d.lastIndex < d.allRecordCount;
    state.remainCount = d.allRecordCount - d.lastIndex;
  });
};

onMounted(() => {
  refeshData();
});
</script>
